<template>
    <div class="table">
       
        <div class="container">
            <div class="handle-box">
                 <el-input v-model="select.orderNo" style="width:250px;" placeholder="请输入订单号" class="handle-input mr10"></el-input>
                 <el-input v-model="select.buyerName" style="width:150px;" placeholder="请输入订购人" class="handle-input mr10"></el-input>
                 <el-select v-model="select.orgId" placeholder="选择企业">
                      <el-option
                        v-for="item in companylist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                 </el-select>
                 <el-select v-model="select.status" placeholder="审核状态">
                      <el-option
                        v-for="item in status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                 </el-select>
                <el-button type="primary" @click="searchData">搜索</el-button>
            </div>
            <div>
                <el-button size="small" type="primary" style="display:block" @click="open">点击上传</el-button>
            </div>
            <el-table :data="data"  v-loading.body="listLoading" class="table" style="width:100%" >
                <el-table-column prop="tradeInfo.payOrderId" label="商城订单号"  width="250">
                </el-table-column>
                <el-table-column prop="org.name" label="归属企业" width="250">
                </el-table-column>
                <el-table-column prop="tradeInfo.tradeMode" label="进口模式" width="100">
                </el-table-column>
                <el-table-column prop="buyerInfo.buyerName" label="订购人" width="100">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="150"  :formatter="formatStatus">
                </el-table-column>
                <el-table-column label="操作"  align="center" prop="id">
                    <template slot-scope="scope" >
                        <el-button  type="text"   @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div> -->
              <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-sizes="[5,10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>
        </div>

        <!-- 编辑弹出框 -->
        <orderDetail v-if="editVisible" :companylist="companylist" :showdetail="editVisible" :ebPlatformlist="ebPlatformlist" :selectId="selectId" @closeDialog="handleclose" @reloadData="handleclosedata"></orderDetail>
       
        <el-dialog
            :visible.sync="uploadfile"
            width="30%"
            ><uploadFile ></uploadFile> 
        </el-dialog>  


    </div>
</template>

<script>
import {QueryOrg,QueryEbPlatform} from '@/api/company';
import orderDetail from './detail.vue'
import uploadFile from './uploadfile';
import {QueryOrder,UploadApi} from '@/api/goods';
    export default {
        name: 'basetable',
        components:{
            orderDetail,uploadFile
        },
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                del_list: [],
                editVisible: false,
                select:{
                    buyerName:'',
                    orderNo:'',
                    status:'',
                    orgId:''
                },
                status:[
                    { label: "全部", value: "" },
                    { label: "暂存", value: "temp" },
                    { label: "准备完毕", value: "ready" },
                    { label: "公服处理中", value: "wait" },
                    { label: "上报成功", value: "ok" },
                    { label: "有问题被拒", value: "problem" },
                    { label: "取消", value: "cancel" }],
                companylist:[],
                form: {},
                total: 0,
                listLoading: false,
                listQuery: {
                    pageNo: 1,
                    pageSize: 10
                },
                selectId:'',
                ebPlatformlist:[],
                uploadfile:false
            }
        },
        created() {
            this.getData();
            QueryOrg({resultType:'list'}).then(res=>{
                this.companylist=res.data.map(item=>{
                    return {label:item.name,value:item.id}
                })
            })

            QueryEbPlatform({resultType:'list'}).then(res=>{
                this.ebPlatformlist=res.data.map(item=>{
                    return {label:item.name,value:item.id}
                })
            })
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    return d;
                })
            }
        },
        methods: {
            formatStatus(row){
                return this.switchstatus(row)
            },
            switchstatus(row){
                 switch(row.status){
                        case 'temp':
                            return '暂存';
                            break;
                        case 'ready':
                            return '准备完毕';
                            break;
                        case 'wait':
                            return '公服处理中';
                            break;
                        case 'ok':
                            return '上报成功';
                            break;
                        case 'problem':
                            return '有问题被拒';
                            break;
                        default:
                            return '异常';
                            break;
                    }
            },
            // 分页导航
           handleSizeChange(val) {
            this.listQuery.pageSize = val
            this.getData(this.select)
            },
            handleCurrentChange(val) {
            this.listQuery.pageNo = val
            this.getData(this.select)
            },
            getData(data) {
                var arg=Object.assign(this.listQuery,{
                    resultType:"pagination",
                    fetchOrderItems: true,
                    fetchOrg: true,
                })
                if(data){
                    arg.buyerName=this.select.buyerName;
                    arg.buyerNameLike=true;
                    arg.orgId=this.select.orgId;
                    arg.orderNo=this.select.orderNo;
                    arg.status=this.select.status;
                }else{
                   delete arg.buyerNameLike;
                }
                // this.listLoading=true;
                this.tableData=[]
               QueryOrder(arg).then(res=>{
                   this.tableData=res.data.list
                   this.listLoading=false;
                   this.total=res.data.totalCount;
               })
            },
            searchData() {
                //带参数查询
                this.listQuery.pageNo=1;
                this.getData(this.select)
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleclose(){
                this.editVisible=false
            } ,
            handleclosedata(){
                this.editVisible=false
                this.getData()
            },
            handleEdit(index, row){
                this.editVisible=true;
                this.selectId=row.tradeInfo.orderNo;
                this.form=row;              
            },
            // 保存编辑
            async saveEditform(status) {
                // this.$set(this.tableData, this.idx, this.form);
                this.editVisible = false;
                
                await CheckDeclaration({
                    ebRegisterGoodsId:this.form.id,
                    approve: status,  //  是否通过
                    remark: this.form.remark
                }).then(res=>{
                     if(res.code=="0"){
                        this.$message.success('操作成功')
                    }else{
                        this.$message.error(res.msg)
                    }
                })
                await this.getData();
            },
            open(){
                this.uploadfile=true
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
</style>
